<template>
	<view class="setApi">
		<view class="inputItem">
			<view class="label">通道号</view><input class="inputbox"  v-model="entroce" placeholder="请输入通道"/>
		</view>
		<!-- <view class="inputItem">
			<view class="label">mqtt</view><input class="inputbox"  v-model="mqtt" placeholder="请输入mqtt"/>
		</view>
		<view class="inputItem">
			<view class="label">port</view><input class="inputbox"  v-model="port" placeholder="请输入端口号"/>
		</view> -->
		<view class="btn" @click="setApis">确定</view>
	</view>
</template>

<script>
	import {
		getCache,
		setCache,
		apiUrl,
		yfAPIS
	} from "@/utils/cache.js";
	export default {
		data() {
			return {
				entroce:'',
				// mqtt:'',
				// port:'',
			}
		},
		onLoad() {
			
		},
		onShow() {
			let that = this;
			const apiInfo = getCache('yf-APIS');
			console.log('参数:',apiInfo);
			if(apiInfo != ''){
				that.entroce = apiInfo.entroce;		
			}
		},
		methods: {
			showMessage(message){
				uni.showToast({
					title: message,
					duration: 2000,
					icon:'none'
				});
			},
			setApis(){
				let that = this;
				if(that.entroce === ''){
					this.showMessage('请输入通道！');
					return;
				}
				// if(that.mqtt === ''){
				// 	uni.showToast({
				// 		title: '请输入mqtt地址(格式:192.168.1.134:8088)！',
				// 		duration: 2000,
				// 		icon:'none'
				// 	});
				// 	return;
				// }
				// if(that.port === ''){
				// 	uni.showToast({
				// 		title: '请输入端口号！',
				// 		duration: 2000,
				// 		icon:'none'
				// 	});
				// 	return;
				// }
				let apiInfo = {
					entroce:that.entroce,
					// mqtt:that.mqtt,
					// port:that.port,
				}
				setCache(yfAPIS,apiInfo)
				uni.showToast({
					title: '设置成功！',
					duration: 2000,
					icon:'none'
				});
				setTimeout(() => {
					uni.navigateBack()
				},1000)
			}
		}
	}
</script>

<style scoped lang="scss">
	.setApi{
		padding: 10px;
		.btn{
			    position: fixed;
			    bottom: 20px;
			    left: 50%;
			    width: 100px;
			    margin-left: -56px;
				text-align: center;
				background-color: #0065D8;
				color: #fff;
				border-radius: 30px;
				padding: 6px;
		}
		.inputItem{
			display: flex;
			margin-bottom: 10px;
			.label{
				width: 100px;
				
			}
			.inputbox{
				border-bottom: 1px solid #d9d9d9;
			}
		}
	}

</style>
